<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- 1. 引入react的文件
        react.js和react-dom.js
        注意: 必须先引入react.js,然后再引入react-dom.js
        react.js中提供了一个React对象
        react-dom.js中提供了一个ReactDOM对象
     -->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script>
      // 需求: 要利用react,动态生成两个标签,一个叫h1,一个叫p
      //   p > h1
      // 创建h1标签
      //   document.createElement(‘标签名’) 返回值是一个dom对象
      //   React.createElement('标签名',{标签的属性：值，标签的属性：值}，子节点) 返回一个对象(这个对象是用来描述未来要创建的dom对象的信息)
      // React.createElement返回的这个对象,人们把他叫做虚拟dom/react元素

      const h1 = React.createElement('h1', {}, 'hello', 'world', 'xxx', 'yyy')
      const p = React.createElement('p', { id: 'test' }, h1)

      //ReactDOM会根据React生成的虚拟dom, 去创建真正的dom对象,然后插入到页面中
      const root = ReactDOM.createRoot(document.getElementById('root')) // 先告诉ReactDOM.未来创建出来的真实dom对象,要插入到哪里
      root.render(p) // 根据虚拟dom创建真实dom.并把创建好的真实dom插入到root中
    </script>
  </body>
</html>
